<template>
	<view>
		<tab @change="handleTabChange"></tab>
		<view class="tab-pane" v-if="currentTab === '1'">
			<view v-for="(item, index) in allList" :key="index">
				<media-item :options="item" @click="goDetail(item.id)"></media-item>
			</view>
		</view>
		<view class="tab-pane" v-if="currentTab === '2'">
			<view v-for="(item, index) in waitList" :key="index">
				<media-item :options="item" @click="goDetail(item.id)"></media-item>
			</view>
		</view>
		<view class="tab-pane" v-if="currentTab === '3'">
			<view v-for="(item, index) in hadList" :key="index">
				<media-item :options="item" @click="goDetail(item.id)"></media-item>
			</view>
		</view>
		<view class="tab-pane" v-if="currentTab === '4'">
			<view v-for="(item, index) in failList" :key="index">
				<media-item :options="item" @click="goDetail(item.id)"></media-item>
			</view>
		</view>
		<view class="no-data" v-if="isNoData">
			<image src="../../static/order.png" mode="aspectFill"></image>
			<text class="tips">你没有相关订单</text>
		</view>
	</view>
</template>

<script>
	import tab from './tab.vue'
    import mediaItem from './news-item.nvue';
	import { getOrderList } from '@/api';
	
	export default {
		components: {
			tab,
			mediaItem
		},
		computed: {
			isNoData() {
				return !this.allList.length;
			}
		},
		data() {
			return {
				currentTab: '1',
				allList: [],
				waitList: [],
				hadList: [],
				failList: []
			}
		},
		methods: {
			goDetail(id) {
				uni.navigateTo({
					url: '../orderDetail/orderDetail?id=' + id
				})
			},
			getOrderList() {
				uni.showLoading({
					title: '加载中'
				})
				
				Promise.all([getOrderList({
					userId: uni.getStorageSync('openid'),
					statue: 1
				}).then(res => {
					this.allList = res.oData;
				}),
				
				getOrderList({
					userId: uni.getStorageSync('openid'),
					statue: 2
				}).then(res => {
					this.waitList = res.oData;
				}),
				
				getOrderList({
					userId: uni.getStorageSync('openid'),
					statue: 3
				}).then(res => {
					this.hadList = res.oData;
				}),

				getOrderList({
					userId: uni.getStorageSync('openid'),
					statue: 4
				}).then(res => {
					this.failList = res.oData;
				})]).then(() => uni.hideLoading());
			},
			handleTabChange(idx) {
				this.currentTab = idx;
			}
		},
		onShow() {
			this.getOrderList();
		}
	}
</script>

<style>
.no-data {
	display: flex;
	flex-direction: column;
	margin-top: 80px;
	justify-content: center;
	align-items: center;
	color: #8A8A8A;
}

.no-data > image {
	width: 100px;
	height: 100px;
}

.no-data .tips {
	font-size: 12px;
	margin-top: 5px;
}
</style>
